import { PlusOutlined } from "@ant-design/icons"
import { Analytics } from "@mall/api-services"
import { Card, Col, Row, Statistic } from "antd"
import * as React from "react"
import { useEffect, useState } from "react"
import { Link, useParams } from "react-router-dom"


export function TotalProductQuantity() {
  const { storeId } = useParams()

  const [totalProductQuantity, setTotalProductQuantity] = useState(new Analytics.Store.StoreTotalProductQuantity())

  useEffect(() => {
    Analytics.Store.StoreReportService
      .countTotalProductQuantity(storeId)
      .then(setTotalProductQuantity)
  }, [storeId])
  return (
    <Card title="商品管理" size="small" extra={<Link to={`products`}>查看更多</Link>}>
      <Row style={{ textAlign: "center" }} gutter={[16, 16]} justify="center" align="middle">
        <Col span={6}>
          <Statistic title="在售中" value={totalProductQuantity.activeQuantity}/>
        </Col>
        <Col span={6}>
          <Statistic title="已售罄" value={0}/>
        </Col>
        <Col span={6}>
          <Statistic title="已驳回" value={totalProductQuantity.disapprovedQuantity}/>
        </Col>
        <Col span={6}>
          <Link to={`products/new`} style={{
            cursor: "pointer",
          }}>
            <PlusOutlined style={{ fontSize: "22px" }}/>
            <div>发布新商品</div>
          </Link>
        </Col>
      </Row>
    </Card>
  )
}
